<template>
    <div>
        <h3>标题 ： {{title}}</h3><hr>
        <vue-preview :src="dir" alt="" class="imgPrev"></vue-preview>
        <vue-preview :slides="slide1" @close="handleClose"></vue-preview><hr>
        <comment-box></comment-box>
    </div>
</template>

<script>
import comment from '../subcomponents/comment.vue'
export default {
    data(){
        return {
            slide1: [
          {
            src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
            msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
            alt: 'picture1',
            title: 'Image Caption 1',
            w: 600,
            h: 400
          },
        ],
            list:[],
            title: '',
            dir: [],
        }
    },
    created(){
        this.list = JSON.parse(localStorage.getItem('photos'+this.$route.params.uid))
        this.title ='第' + (parseInt(this.$route.params.uid) + 1) + '组' + '第' + this.$route.params.id +'张'
        this.list.some(value => {
            if (value.id == parseInt(this.$route.params.id)+parseInt(this.$route.params.uid)-1){
                this.slide1[0] = value
                this.slide1[0].w=600
                this.slide1[0].h=400                
                this.slide1[0].title= this.title
                this.slide1[0].alt = this.title
                this.slide1[0].msrc = this.slide1[0].src
                return true
            }
        })
    },
    methods: {
        handleClose () {
        }
    },
    components:{
        'comment-box': comment
    }
}
</script>

<style scoped>
h3{
    text-align: center;
}
img{ 
    margin: 0!important;
    display: inline-block!important;
    width: 100%;
    padding: 0 10px;
}
figure{
    margin: 0;
}
a img{
    width: 60px;
    height: 40px;
}
</style>